<template>
  <Modal v-model="visible" width="500" title="数据导入">
    <div class="step">
      <h4>第一步</h4>
      <p>请按照数据模板的格式准备导入数据</p>
      <span style="color: #4876FF; cursor: pointer;" @click="onDownload">下载项目津贴模板</span>
    </div>
    <div class="step">
      <h4>第二步</h4>
      <p>请正确录入工号、姓名、津贴等信息</p>
    </div>
    <div class="step">
      <h4>第三步</h4>
      <p>请上传已填写的“项目津贴模板”</p>
      <div style="display: flex; align-items: flex-end; margin-top: 5px;">

        <!-- <Upload ref="upload" :action="upload.reqUrl" :headers="upload.headers" :data="upload.data" :show-upload-list="false" accept=".xls, .xlsx" :max-size="10240" :on-exceeded-size="onExceededSize"
          :before-upload="onBeforeUpload" :on-success="onSuccess">
          <Button>上传文件</Button>
        </Upload>
        <p class="file">
          <span>{{ file.name }}</span>
          <span v-if="errUrl" @click="onDownloadErr">异常信息下载</span>
        </p> -->
        <div style="display: flex; align-items: flex-end; margin-top: 5px;">
          <Upload ref="upload" :action="upload.reqUrl" :headers="upload.headers"
            :data="upload.data" :show-upload-list="false" accept=".xls, .xlsx"
            :max-size="10240" :on-exceeded-size="onExceededSize"
            :before-upload="onBeforeUpload" :on-success="onSuccess">
            <Button>上传文件</Button>
          </Upload>
          <p class="file">
            <span v-if="errUrl" @click="onDownloadErr">异常信息下载</span>
            <span v-else>{{ file.name }}</span>
          </p>
        </div>
      </div>
    </div>

    <div slot="footer" class="footer">
      <Button @click="hide">取消</Button>
      <Button type="primary" @click="onConfirm">导入</Button>
    </div>
  </Modal>
</template>

<script>
  import toolApi from '@/biz/base/tool'
  import incentiveMgr from '@/biz/bonus/incentive'

  export default {
    props: {
      data: Object,
      refresh: Function,
    },
    data() {
      return {
        visible: false,
        upload: incentiveMgr.importBonusAllowanceDetail({
          housesId: this.$dt.buildInfo().housesId,
          allowanceId: this.$route.query.allowanceId,
        }),
        file: '',
        info: {},
        errUrl: '',
      }
    },
    methods: {
      onConfirm() {
        if (!this.file) {
          this.$Message.error('请选择文件')
          return
        }
        this.$refs.upload.post(this.file)
      },
      // 上传成功
      onSuccess(res, file, fileList) {
        console.log(res, 'aaaaaaaaaaaaaaaaaaaaaaaaa')
        if (res.code == '200') {
          if (res.data.accessoryUrl) {
            this.errUrl = res.data
            this.$Message.error('请根据异常信息中提示的问题进行修改后，重新提交')
          } else {
            this.$Message.success('导入成功')
            this.$parent.getDetails()
            // this.$emit('importSuccess')

            this.hide()
          }
        } else {
          this.$Message.error(res.msg)
        }
      },
      onBeforeUpload(file) {
        console.log(file, 'fileeeeeeeeeeee')
        this.file = file
        this.errUrl = ''
        return false
      },
      // 文件超过大小
      onExceededSize(file) {
        this.$Message.warning('最大支持10M')
      },
      // 下载异常信息
      onDownloadErr() {
        console.log(this.errUrl, 'this.errUrl')
        // toolMgr.downloadFile(
        //   this.errUrl,
        //   `${this.info.housesName}-${this.info.commissionMonth}-异常信息.xls`
        // )
        toolApi.downloadFile(this.errUrl.accessoryUrl, this.errUrl.accessoryName)
      },
      // downItem() {
      //   toolApi.downloadFile(this.errUrl.accessoryUrl, this.errUrl.accessoryName)
      // },

      onDownload() {
        let params = {
          fileName: '项目津贴模板.xls'
        }
        incentiveMgr.exportBonusAllowanceDetail(params)
      },

      show(info) {
        this.visible = true
        // this.info = {
        //   housesName: info.housesName,
        //   commissionMonth: info.commissionMonth,
        // }
      },
      hide() {
        this.visible = false
        this.file = ''
        this.info = {}
        this.errUrl = ''
      },
    },
  }
</script>

<style lang='scss' scoped>
  .step {
    margin: 0 0 24px 10px;

    h4 {
      margin-bottom: 5px;
    }

    .file {
      span {
        color: #4876ff;
        text-decoration: underline;
        margin-left: 15px;
        cursor: pointer;
      }
    }
  }
</style>